<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-02-12 23:33:12
-->
<template>
    <div class="singer-info">
        <!-- 左侧封面 -->
        <div class="left-img">
            <img :src="coverImg" alt="">
        </div>
        <!-- 右侧信息 -->
        <div class="right-info">
            <!-- 歌手名 -->
            <div class="singer-name">
                <el-tag effect="plain" size="large" class="tag">歌手</el-tag>
                <span class="name">{{ props.singerInfo.artist?.name }}</span>
                <div class="alias">
                    <span v-for="(item, index) in props.singerInfo.artist?.alias" :key="index">
                        {{ index == props.singerInfo.artist?.alias.length - 1 ? item : item + ';' }}
                    </span>
                </div>
            </div>
            <!-- 相关操作 -->
            <div class="operation">
                <el-button :icon="props.isSub ? 'FolderChecked' : 'FolderAdd'"
                    :type="props.isSub ? 'primary' : 'default'">{{
                        props.isSub ? '已收藏' : '收藏'
                    }}
                </el-button>
                <el-button icon="User">个人主页</el-button>
            </div>
            <!-- 作品数量 -->
            <div class="count">
                <div class="item-count">
                    <span class="iconfont icon-yinle"></span>
                    <span>单曲数: {{ props.singerInfo.artist?.musicSize }}</span>
                </div>
                <div class="item-count">
                    <span class="iconfont icon-zhuanji"></span>
                    <span>专辑数: {{ props.singerInfo.artist?.albumSize }}</span>
                </div>
                <div class="item-count">
                    <span class="iconfont icon-MV1"></span>
                    <span>MV数: {{ props.singerInfo.artist?.mvSize }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
    singerInfo: {
        type: Object,
        default: {}
    },
    isSub: Boolean,

})

let coverImg = computed(() => {
    return props.singerInfo.artist?.cover
})
</script>

<style lang="scss" scoped>
.singer-info {
    display: flex;
    align-items: center;

    .left-img {
        height: 200px;
        width: 210px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right-info {
        margin-left: 20px;

        .singer-name {
            .tag {
                border-color: var(--mycompColor);
                color: var(--mycompColor);
                font-size: 15px;
            }

            .name {
                margin-left: 20px;
                font-weight: 700;
                font-size: 20px;
            }

            .alias {
                margin-top: 10px;

                span {
                    margin-right: 10px;
                }
            }
        }

        .operation {
            margin-top: 15px;
        }

        .count {
            margin-top: 15px;

            .iconfont {
                font-size: 14px;
            }

            .item-count {
                margin-bottom: 8px;

                span {
                    padding-left: 10px;
                }
            }
        }
    }
}

:deep(.el-button) {
    padding: 8px 30px;
    border-radius: 20px;
}

:deep(.el-button:hover) {
    background-color: #f2f2f2;
    border-color: #bebaba;
    color: black;
}

:deep(.el-button:focus) {
    background-color: #f2f2f2;
    border-color: #bebaba;
    color: black;
}
</style>